@import '../../style/index.scss';

.blog-list {
  list-style: none;
  max-width: 720px;
  margin: 50px auto 0;
  padding-left: 20px;
  border-left: 1px solid #ccc;

  .item-block {
    width: 100%;
  }

  .blog-item {
    position: relative;
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    &::before {
      position: absolute;
      content: '';
      top: 16px;
      left: -26px;
      border: 6px solid $primary;
      border-radius: 100%;
    }

    .time {
      position: absolute;
      top: 14px;
      left: -120px;
      width: 86px;
      text-align: right;
      color: #ccc;
    }

    @media screen and (max-width: 720px) {
      .time {
        display: none;
      }
    }

    .item {
      line-height: 1.6;
      margin-bottom: 10px;

      .title {
        line-height: 1.4;
        font-size: 22px;
      }
      .info{
        display: flex;
        justify-content: space-between;
        .tags {
          .tag {
            padding: 5px;
            font-size: 12px;
            color: #ccc;
          }
        }
        .meta {
          .count,.date,i{
            font-size: 12px;
            color: #ccc;
            padding-right: 5px;
          }
          @media screen and (min-width: 720px) {
            .date {
              display: none;
            }
          }
        }
      }

      &:hover {
        color: $primary;
        cursor: pointer;
      }
    }

  }
}